<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM概述</title>
</head>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
<div id="div4" class="cls1">div4</div>
<div id="div5" class="cls1">div5</div>
<input type="text" name="username">
<script>
    /*
    * DOM:Document Object Model:文档对象模型
    * 将标记语言文档的各个组成部分，封装为对象，可以用这些对象，对文档进行crud操作。
    * 文档---dom树
    * dom定义了访问html和xml的标准。
    * 核心dom：
    *           document:文档对象
    *           element：元素（标签）对象
    *           attribute：属性对象
    *           text：文本对象
    *           comment：注释对象
    *           node：节点对象，其他五个对象的父对象
    * xmlDom：
    * htmlDom
    *
    * */
    /*
    * Document对象：
    * 获取：在html dom模型中，可以使用window对象来获取
    * 方法：
    *           1.获取element对象
    *               getElementById()根据id属性获取元素对象
    *               getElementsByTagName():根据元素名称获取元素们，返回值是数组。
    *               getElementsByClassName():根据class属性获取元素对象们，返回值是数组。
    *               getElementsByName():根据name属性获取元素对象们，返回值是数组
    *           2.创建其他dom对象
    *               createAttribute()
    *               createComment()
    *               createElement()
    *               createTextNode()
    * 属性：
    *
    * */
    var tagNames = document.getElementsByTagName("div");

   var cls = document.getElementsByClassName("cls1");
   var ele_username = document.getElementsByName("username");
   //alert(ele_username.length);
    var ee = document.createElement("table");
    alert(ee);

</script>
</body>
</html>